<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function  f1() {
                let btn=document.querySelector("#btn");
                //访问DOM属性  DOM对象.属性
                console.log(btn.type);
                console.log(btn.value);
                console.log(btn.id);
                console.log(btn.onclick);

                //无法通过DOM.属性获取html标签中自定义的属性
                console.log(btn.hello);

                //DOM对象.属性名=值
                btn.value="哈哈哈";


            }
            function f2(){
                let btn2=document.querySelector("#btn2");
                //DOM对象.getAttribute("属性名") 获取html标签的属性
                console.log(btn2.getAttribute("type"));
                console.log(btn2.getAttribute("value"));
                console.log(btn2.getAttribute("id"));
                console.log(btn2.getAttribute("onclick"));
                console.log(btn2.getAttribute("hello"));

                // DOM.setAttribute("属性名","属性值")
                btn2.setAttribute("value","呵呵呵呵呵");
            }
        </script>
    </head>
    <body>
        <input type="button" value="访问DOM对象的属性" id="btn" onclick="f1()" hello="world">
        <input type="button" value="访问DOM对象所对应标签的HTML属性" id="btn2" onclick="f2()" hello="world">
    </body>
</html>